<template>
    <div class="container">
        <div id="main" class="chart"></div>
        <div class="sidebar">
            <el-select v-model="localdata" placeholder="请选择省份" style="width: 200px;" @change="getdatabody">
                <el-option v-for="province in provinces" :key="province" :label="province" :value="province" />
            </el-select>
            <div id="pieChart" class="pie-chart"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { toRefs, reactive } from 'vue';
import axios from 'axios';

export default {
    setup() {
        const state = reactive({
            data: [],
            selectedProvince: '',
            localdata: '北京市',
            provinces: [],
            bodydata: [],
        })
        getdata()
        function getdata() {
            axios.get('/api/tcmsampledata/local')
                .then(function (response) {
                    // 成功处理
                    const result = response.data;
                    console.log("++", result);
                    if (result.code === 200) {
                        state.data = result.data;
                        console.log("++", state.data);
                        state.provinces = result.data.map(item => item.local);
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        getdatabody()
        function getdatabody() {
            axios.get('/api/tcmsampledata/body', {
                params: {
                    local: state.localdata
                }
            })
                .then(function (response) {
                    // 成功处理
                    const result = response.data;
                    if (result.code === 200) {
                        state.bodydata = result.data;
                    }
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        return {
            ...toRefs(state),
            getdata,
            getdatabody
        }
    },


    name: 'ChinaMap',
    mounted() {
        this.initMap();
        this.renderPieChart();  // 页面加载时默认获取北京的数据
    },

    watch: {
        localdata(newVal) {
            if (newVal) {
                this.renderPieChart(newVal)
            }
        }
    },

    methods: {
        initMap() {
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                .then(response => response.json())
                .then(data => {
                    echarts.registerMap('china', data);
                    this.renderMap();
                });
        },

        //中国地图
        renderMap() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);

            // 将 state.data 转换为 ECharts 需要的格式
            const mapData = this.data.map(item => ({
                name: item.local,  // 假设 state.data 中的省份字段为 province
                value: item.count     // 假设 state.data 中的值字段为 value
            }));
            var option = {
                title: {
                    text: '人数分布图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2
                },
                visualMap: {
                    left: 'right',
                    min: 0,
                    max: 100,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    },
                    text: ['高', '低'],           // 文本，默认为数值文本
                    calculable: true
                },
                series: [
                    {
                        name: '中国省份',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                            show: false,
                            color: 'rgba(0,0,0,0.7)'
                        },
                        itemStyle: {
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            itemStyle: {
                                areaColor: '#FFD700'
                            }
                        },
                        data: mapData
                    }
                ]
            };
            myChart.setOption(option);
        },

        // 饼图
        renderPieChart(province) {
            const chartDom = document.getElementById('pieChart')
            const myChart = echarts.init(chartDom)

            // 修改 mapData 的获取方式
            const mapData = this.bodydata.map(item => ({
                name: item.body,
                value: item.count
            }));

            const option = {
                title: {
                    text: `${province} 数据统计`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '数据统计',
                        type: 'pie',
                        radius: '50%',
                        data: mapData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
};
</script>

<style scoped>
.container {
    top: 0;
    left: 0;
    position: absolute;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100vh;
}

.chart {
    width: 50vw;
    height: 100vh;
    background-color: aquamarine;
}

.sidebar {
    width: 50vw;
    height: 100vh;
    padding: 20px;
    margin-left: 10px;
    overflow-y: auto;
}

.pie-chart {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}
</style>